<template>
  <div class="home-page">
    <!-- 弹窗 -->
    <el-dialog
      title="新增电路配置"
      v-model="dialogVisible"
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        width: 30%;
        margin-top: 15%;
      "
    >
      <el-form :model="form">
        <!-- 在这里添加你的表单字段 -->
        <el-form-item label="电路名称:">
          <el-input v-model="form.circuit_diagram_name"></el-input>
        </el-form-item>
        <el-form-item label="创建用户:">
          <el-input v-model="form.auth" disabled></el-input>
        </el-form-item>
        <el-form-item label="电路描述:">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
        <!-- 其他表单字段 -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选项卡 -->
    <div
      style="
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: start;
        margin-bottom: -10px;
      "
    >
      <div class="tabs">
        <button @click="openDialog" class="tab-button">新增电路名</button>
      </div>
      <div
        style="
          margin-top: -30px;
          width: 85%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
        "
      >
        <!-- 搜索框 -->
        <div class="search-container">
          <a style="width: 40%; margin-top: 10px; margin-right: -10px"
            >电路名称：</a
          >
          <input
            type="text"
            v-model="searchQuery.circuit_diagram_name"
            placeholder="根据电路名称搜索"
            @input="handleSearch"
            class="search-input"
          />
        </div>
        <div class="search-container">
          <a style="width: 30%; margin-top: 10px; margin-right: -10px"
            >创建者：</a
          >
          <input
            type="text"
            v-model="searchQuery.auth"
            placeholder="根据创建者搜索"
            @input="handleSearch"
            class="search-input"
          />
        </div>
        <div class="search-container">
          <a style="width: 20%; margin-top: 10px; margin-right: -8px">描述：</a>
          <input
            type="text"
            v-model="searchQuery.desc"
            placeholder="根据电路描述搜索"
            @input="handleSearch"
            class="search-input"
          />
        </div>
        <button
          class="tab-button"
          style="
            margin-left: 20px;
            background-color: #000000;
            width: 30%;
            margin-top: -43px;
          "
          @click="searchCircuits()"
        >
          搜索
        </button>
        <button
          class="tab-button"
          style="
            margin-left: 20px;
            background-color: #003f82;
            width: 30%;
            margin-top: -43px;
          "
          @click="reSearch()"
        >
          重置
        </button>
      </div>
    </div>
    <!-- 搜索内容展示区域 -->
    <div class="search-results">
      <el-scrollbar max-height="630px">
        <el-card
          v-for="(item, index) in results.name"
          :key="item.id"
          class="card"
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              width: 95%;
              margin-left: 2.5%;
              margin-top: -7px;
              margin-bottom: -17px;
            "
          >
            <div style="display: flex; flex-direction: column; width: 90%">
              <h2 class="card-title">电路名：{{ item }}</h2>
              <p class="card-info">创建者: {{ results.auth[index] }}</p>
              <p class="card-info">创建日期: {{ results.datetime[index] }}</p>
              <p class="card-description">描述: {{ results.desc[index] }}</p>
              <el-button  style="width: 25%;"  type="info" size="default" v-if="userInfo=='root'">
              <!--                       @click="settingCircuit1(item)">-->

               
                新-编辑
              </el-button>
            </div>
            <el-card style="width: 8.5%; margin-left: 50px; margin-top: -10px">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <button class="card-button" @click="settingCircuit(item)">
                  编辑
                </button>
                <button
                  class="card-button"
                  style="
                    margin-top: 20px;
                    margin-bottom: -10px;
                    background-color: #595959;
                  "
                  @click="checkCreatorAndDelete1(item, results.auth[index])"
                >
                  删除
                </button>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-scrollbar>
    </div>
    <div style="width: 90%; margin-top: 15px">
      <div v-if="isLook" class="demo-pagination-block">
        <el-pagination
          class="custom-pagination"
          v-model:current-page="_skip"
          v-model:page-size="_limit"
          :page-sizes="[4]"
          :size="size"
          :background="true"
          layout=" total, prev, pager, next"
          :total="total"
          @size-change="onPageSize"
          @current-change="onPageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="电路搜索">
import { ref, onMounted } from "vue";
import {
  addCircuit,
  circuitServer,
  deleteCircuit,
  getCircuitFind,
} from "@/server/iIndex";
import { ElMessage } from "element-plus";
import useUserInfoStore from "/src/stores/userInfo.js";
import router from "@/router/index.js";
const userInfo = useUserInfoStore();
const isLook = ref(false);
const _skip = ref(1);
const total = ref(0);
const _limit = ref(4);
const size = ref("default");
const searchQuery = ref({
  _skip: _skip.value,
  _limit: _limit.value,
  circuit_diagram_name: "",
  auth: "",
  desc: "",
});
const onPageChange = (num) => {
  _skip.value = num;
  searchQuery.value._skip = num;
  searchCircuits();
};

const onPageSize = (num) => {
  _limit.value = num;
  searchQuery.value._limit = num;
  searchCircuits();
};
const results = ref([]);

const reSearch = async () => {
  (searchQuery.value.auth = ""),
    (searchQuery.value.circuit_diagram_name = ""),
    (searchQuery.value.desc = ""),
    (searchQuery.value._skip = 1);
  _skip.value = 1;
  await getCircuits();
  (searchQuery.value.circuit_diagram_name = ""),
    (searchQuery.value.desc = ""),
    await getCircuits();
  isLook.value = false;
};

const searchCircuits = async () => {
  try {
    if (
      searchQuery.value.auth != "" ||
      searchQuery.value.circuit_diagram_name != "" ||
      searchQuery.value.desc != ""
    ) {
      const response = await getCircuitFind(searchQuery.value);
      results.value = response;
      total.value = parseInt(results.value.total_num, 10);
      isLook.value = true;
    } else {
      confirm("请先输入查询内容");
    }
  } catch (error) {
    ElMessage.error("操作失败");
  }
};
const getCircuits = async () => {
  try {
    const response = await circuitServer(searchQuery.value);
    results.value = response;
  } catch (error) {
    ElMessage.error("获取数据失败");
  }
};

const checkCreatorAndDelete1 = async (circuitName, creator) => {
  try {
    const currentUser = userInfo.info;
    if (creator !== currentUser) {
      alert("您非创建者，不可删除该条记录");
    } else {
      const isConfirmed = confirm("是否确认删除该条记录？");
      if (isConfirmed) {
        try {
          await deleteCircuit(circuitName);
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getCircuits();
        } catch (error) {
          ElMessage({
            type: "error",
            message: "删除失败",
          });
        }
      }
    }
  } catch (error) {
    confirm("请确认电路是否存在仿真结果！");
    ElMessage.info("操作失败，操作取消");
    // console.log("error1", circuitName)
    // console.error("出错了:", error);
  }
};
// 选择选项卡
const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
const form = ref({
  circuit_diagram_name: "",
  auth: userInfo.info,
  desc: "",
}); // 表单数据

// 打开弹窗
const openDialog = () => {
  // form.value.desc = new Date();
  console.log("点击了");
  dialogVisible.value = true;
};
// 提交表单
const submitForm = async () => {
  try {
    await addCircuit(form.value);
    dialogVisible.value = false; // 关闭弹窗
    ElMessage({
      type: "success",
      message: "提交成功",
    });
    await getCircuits();
  } catch {
    ElMessage.error("电路名重复！");
  }
};
const settingCircuit = (circuitName) => {
  router.push({
    name: "电路配置",
    params: {
      circuitName: circuitName,
    },
  });
};
const settingCircuit1 = (circuitName) => {
  router.push({
    name: "电路设置",
    params: {
      circuitName: circuitName,
    },
  });
};
onMounted(async () => {
  await getCircuits();
});
</script>

<style lang="scss" scoped>
.home-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: Arial, sans-serif;

  margin: 0 auto;
  padding: 20px;
  /* background-color: #f8f9fa; */
}

.search-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-top: 10px;
}

.search-input {
  width: 100%;
  max-width: 300px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  /* margin-left: 50px; */
}

.search-results {
  display: flex;
  margin-top: 0px;
  width: 90%;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  /* margin-bottom: -20px; */
  border-radius: 1px;
  gap: 10px;
  box-shadow: 5px 3px 20px rgba(0, 0, 0, 0.1);
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-left: 10px;
  margin-top: 7px;
}

.card-button {
  background-color: #003f82;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  height: 50px;
  margin-top: -10px;
  transition: background-color 0.3s;
}

.card-title {
  margin-top: -5px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.card-info {
  margin: 5px 0;
  padding: 0 10px;
}

.card-description {
  margin: 5px 0;
  padding: 0 10px;
  color: #6c757d;
}

.tabs {
  /* display: flex; */
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 10px;
  margin-left: -20px;
  width: 200px;
  height: 40px;
}

.tab-button {
  background-color: #003f82;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.tab-button:hover {
  background-color: #0056b3;
}

.tab-content {
  margin-top: 20px;
  padding: 20px;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

.demo-pagination-block {
  margin-top: 30px;
  text-align: left;
  display: block;
}

/* prev, pager, next */
.custom-pagination .el-pagination__total {
  color: #000000;
}
</style>
